import React, { Component } from 'react'
import { Text, StyleSheet, View, SafeAreaView ,FlatList, TouchableOpacity} from 'react-native'

export default class FlatLists extends Component {
    constructor(){
        super()
        this.state = {
            isLoading: false,
            selecteDId: null,
            list : [
                {
                    id: 1,
                    title: '社会',
                },
                {
                    id: 2,
                    title: '國際',
                },
                {
                    id: 3,
                    title: '科技',
                },
                {
                    id: 4,
                    title: '財經',
                },
                {
                    id: 5,
                    title: '體育',
                },
                {
                    id: 6,
                    title: '娛樂',
                },
                {
                    id: 7,
                    title: '健康',
                },
                {
                    id: 8,
                    title: '運動',
                },
                {
                    id: 9,
                    title: '旅遊',
                },
                {
                    id: 10,
                    title: '其他',
                }
            ]
        }
    }
    renderItem = ({index,item}) => {
        const backgroundColor = this.state.selecteDId === item.id ? '#dfd' : '#f9c2ff'
        return(
        <TouchableOpacity style={[styles.item,{backgroundColor}]}
        onPress={()=>{
            this.setState({selecteDId: item.id})
        }}
        >
            <Text style={[styles.title]}>{item.title}</Text>
        </TouchableOpacity>
        )
    }
    loadData = () => {
        this.setState({
            isLoading: true,
        })

        setTimeout(() => {
            this.setState({
                isLoading: false,
            })
        }, 2000)
    }
  render() {
    return (
      <SafeAreaView style={[styles.container]}>
        <FlatList
            data={this.state.list}
            renderItem={this.renderItem}
            keyExtractor={item => item.id}
            horizontal={false} // 竖直排列
            initialScrollIndex={0} // 初始滚动索引
            initialNumToRender={7} // 初始渲染多少条数据
            numColumns={1} // 多列排列
            inverted={false} // 反转列表
            extraData={this.state.selecteDId} // 额外数据，当extraData变化时，会重新渲染列表

            showsVerticalScrollIndicator={false} // 隐藏滚动条

            ItemSeparatorComponent={()=>{
                // 自定义分割线样式
                return <View style={{height: 1, backgroundColor: '#ccc'}}></View>
            }}
            ListEmptyComponent={() => {
                // 自定义空列表样式
                return <Text style={{textAlign: 'center',fontSize: 26,marginTop: 20, color: '#999'}}>暂无数据</Text>
              }}
              // 上拉刷新
            refreshing={this.state.isLoading}
            onRefresh={this.loadData}
              // 下拉刷新
            onEndReachedThreshold={0.1}// 距离底部距离小于10%时触发加载更多数据
            onEndReached={()=>{
                alert('到底了！')
            }}

            ListHeaderComponent={()=>{
                // 自定义头部样式
                return <View style={{height: 100, backgroundColor: '#66f'}}><Text style={{textAlign: 'center',fontSize: 26,marginTop: 20, color: '#fff'}}>这是头部</Text></View>
              }}
              ListFooterComponent={()=>{
                // 自定义尾部样式
                return <View style={{height: 100, backgroundColor: '#66f'}}><Text style={{textAlign: 'center',fontSize: 26,marginTop: 20, color: '#fff'}}>没有更多了</Text></View>
              }}
        >

        </FlatList>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 16,
      },
      item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
      },
      title: {
        fontSize: 45,
      },
})
